<!DOCTYPE html>
<html ng-app="ezApp">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
	<script src="../../lib/ionic/js/ionic.bundle.min.js"></script>
	<link rel="stylesheet" type="text/css" href="../../lib/ionic/css/ionic.min.css">
</head>
<body ng-controller="ezCtrl">
	<!--导航框架之导航栏-->
	<ion-nav-bar class="bar-positive">
		<ion-nav-back-button></ion-nav-back-button>
	</ion-nav-bar>
	<!--导航框架之导航视图-->
	<ion-nav-view></ion-nav-view>
	<script id="home.html" type="text/ng-template">
		<!--导航框架之模板视图-->
		<ion-view view-title="Home">
			<ion-content>
				<ion-list>
				  	<ion-item ui-sref="music" class="item-icon-right">
						Go to music page!
						<i class="icon ion-chevron-right"></i>
					</ion-item>
					<ion-item class="item-divider">$ionicHistory</ion-item>
					<ion-item ng-click="show_history($event)">viewHistory()</ion-item>
					<ion-toggle ng-model="flag.disableAnimate">nextViewOptions()</ion-toggle>
				</ion-list>
			</ion-content>
		</ion-view>
	</script>
	<script id="music.html" type="text/ng-template">
		<!--导航框架之模板视图-->
		<ion-view view-title="Music">
			<ion-content class="padding">
				<a class="button ion ion-home" ui-sref="home">go home</a>
			</ion-content>
		</ion-view>
	</script>
</body>
</html>
<script>
angular.module("ezApp", ["ionic"])
.config(function($stateProvider,$urlRouterProvider) {
	$stateProvider
	.state("home", {
		templateUrl: "home.html"
	})
	.state("music", {
		templateUrl: "music.html"
	});
})
.controller("ezCtrl",function($scope,$state,$ionicPopover,$ionicHistory){
	$state.go("home");
	$scope.flag = {};
	$scope.go_back = function() {
		$ionicHistory.goBack();
	};
	$scope.show_history = function($event){
		var h = $ionicHistory.viewHistory(),
			hstr = JSON.stringify(h,null,"	"),
			tpl = ["<ion-popover-view>",
					"<ion-header-bar>history</ion-header-bar>",
					"<ion-content>",
					"<pre>",
					hstr,
					"</pre>",
					"</ion-content>",
					"</ion-popover-view>"
				].join("");
		$ionicPopover.fromTemplate(tpl).show($event);
	};
	$scope.$watch("flag.disableAnimate",function(nv){
		$ionicHistory.nextViewOptions({
			disableAnimate:nv
		})
	});
})

</script>
